<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/base_bai/base.css">
    <title>确认订单</title>

    <style>
    img{    display: block;}
      html, body{font-size: 100%;background: white}

  .lunbo img{width: 100%}
  .van-search{    opacity: 0.8;  position: fixed;z-index: 1;  width: 100%;  border-radius: 1rem;background: initial}
  .van-search>div{    border-radius: 1rem;}

  .box {
      width: 25%;
      height: 73.5px;
      text-align: center;
      font-style: 0;
      float: left;
  }
  .icon {
      width: 2.5rem;
      height: 2.5rem;
      background: linear-gradient(55deg, rgba(255, 153, 0, 1) 0%, rgba(255, 205, 130, 1) 100%);
      border-radius: 50%;
      margin: 0 auto;
      margin-top: 0.24rem;
  }
  .size {
      margin-top: .2rem;
      font-size: .8rem;
      font-family: PingFang SC;


  }
  .data{ clear: both;display: flex;align-items: center;padding: .5rem 0}
  .datatitle {
    width: 3.5rem;
      margin:.5rem 0.5rem .5rem 1rem;

  }

          .online {
              vertical-align: middle;
              font-size: 0.7rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
          }
          .block {
              width: 100%;
              height: 0.5rem;
              background: rgba(245, 245, 245, 1);
          }
          .superior_products {
              text-align: center;
              font-size: 1rem;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              line-height: 2rem;
          }

          .vertical1 {
              display: inline-block;
              width: 0.1875rem;
              height: 0.19rem;
              background: linear-gradient(0deg, rgba(255, 62, 62, 1) 0%, rgba(255, 131, 131, 1) 100%);
              border-radius: 0.03rem;
              vertical-align: middle;
          }

          .vertical2 {
              display: inline-block;
              width: 0.1875rem;
              height: 0.378rem;
              background: linear-gradient(0deg, rgba(255, 62, 62, 1) 0%, rgba(255, 131, 131, 1) 100%);
              border-radius: 0.03rem;
              vertical-align: middle;
          }

          .vertical3 {
              display: inline-block;
              width: 0.1875rem;
              height: 0.634rem;
              background: linear-gradient(0deg, rgba(255, 62, 62, 1) 0%, rgba(255, 131, 131, 1) 100%);
              border-radius: 0.03rem;
              vertical-align: middle;
          }

          .order_cont{ border-top: 1px solid #f7f7f7;display:flex;padding: 1rem 0 0.5rem;}
          .order_cont *{font-size: .9rem}
          .order_cont>[cont]{position: relative;}
          .order_cont>[cont]>div:nth-child(1){height:2.5rem;   display: -webkit-box;-webkit-box-orient: vertical;  -webkit-line-clamp: 2;  overflow: hidden;}
          .order_cont>[cont]>div:nth-child(2){position:absolute;    bottom: 0;}
          .order_cont>[shop_img]{margin-right:.5rem;border-radius: 0.5rem}
          .order_cont [cont_font]>span{color:#979899;  padding-right: 1rem;}
    </style>
</head>

<body>
    <div id="app" v-cloak>

<div>  <van-search background="initial" placeholder="请输入搜索关键词" v-model="value" /></div>
  <div class="lunbo">

      <van-swipe :autoplay="300000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
              <img :src="image" @click='  openWin("index_2", "index_2");' />
          </van-swipe-item>
      </van-swipe>
  </div>
  <div class="nav">
      <div class="box" @click='openWin("goods_list", "../goods/goods_list")'>
          <div class="icon"></div>
          <div class="size">时尚女装</div>
      </div>
      <div class="box"  @click='openWin("goods_list", "../goods/goods_list")'>
          <div class="icon"></div>
          <div class="size">男装</div>
      </div>
      <div class="box"  @click='openWin("goods_list", "../goods/goods_list")'>
          <div class="icon"></div>
          <div class="size">潮鞋</div>

      </div>
      <div class="box"  @click='openWin("goods_list", "../goods/goods_list")'>
          <div class="icon"></div>
          <div class="size">名表</div>
      </div>
      <div class="box"  @click='openWin("goods_list", "../goods/goods_list")'>
          <div class="icon"></div>
          <div class="size">洗护</div>
      </div>
  </div>
  <div class="data">
      <img class="datatitle" src="./../../image/homepage_notice.png" alt="">
      <span class="online">热烈庆贺优买单系统正式上线!</span>
  </div>
  <div class="block"></div>
  <div class="superior_products">
      <span class="vertical1"></span>
      <span class="vertical2"></span>
      <span class="vertical3"></span>
      <span class="products">优品推荐</span>
      <span class="vertical3"></span>
      <span class="vertical2"></span>
      <span class="vertical1"></span>
  </div>

  <div style="padding: 0 1rem">
    <div class="order_cont"  @click='openWin("goods_list", "../goods/goods_list")'>
        <div  shop_img><img src="../../image/goods.jpg"  style="width:6.25rem;border-radius:.5rem"/></div>
        <div  cont >
          <div>秋冬季高帮马丁靴男真皮雪地靴耐磨工装靴沙漠男英伦复古沙漠靴帆  </div>  <div>
            <div style="color:#FF540A">￥<b>169</b></div>
            <div cont_font>
              <span>已售：349</span>
            </div>
        </div>
        </div>
    </div>
    <div class="order_cont"  @click='openWin("goods_list", "../goods/goods_list")'>
        <div  shop_img><img src="../../image/goods.jpg"  style="width:6.25rem;border-radius:.5rem"/></div>
        <div  cont >
          <div>秋冬季高帮马丁靴男真皮雪地靴耐磨工装靴沙漠男英伦复古沙漠靴帆  </div>  <div>
            <div style="color:#FF540A">￥<b>169</b></div>
            <div cont_font>
              <span>已售：349</span>
            </div>
        </div>
        </div>
    </div>
    <div class="order_cont"  @click='openWin("goods_list", "../goods/goods_list")'>
        <div  shop_img><img src="../../image/goods.jpg"  style="width:6.25rem;border-radius:.5rem"/></div>
        <div  cont >
          <div>秋冬季高帮马丁靴男真皮雪地靴耐磨工装靴沙漠男英伦复古沙漠靴帆  </div>  <div>
            <div style="color:#FF540A">￥<b>169</b></div>
            <div cont_font>
              <span>已售：349</span>
            </div>
        </div>
        </div>
    </div>
    <div class="order_cont"  @click='openWin("goods_list", "../goods/goods_list")'>
        <div  shop_img><img src="../../image/goods.jpg"  style="width:6.25rem;border-radius:.5rem"/></div>
        <div  cont >
          <div>秋冬季高帮马丁靴男真皮雪地靴耐磨工装靴沙漠男英伦复古沙漠靴帆  </div>  <div>
            <div style="color:#FF540A">￥<b>169</b></div>
            <div cont_font>
              <span>已售：349</span>
            </div>
        </div>
        </div>
    </div>
  </div>
  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/base_bai/vue.js"></script>
<script src="../../script/base_bai/vant.js"></script>
<script src="../../script/base_bai/base.js"></script>
<script src="../../script/base_bai/temp.js"></script>
<script type="text/javascript">
    apiready = function() {

        Vue.prototype.$ac = api;
        initVue()


        api.setCustomRefreshHeaderInfo({
      bgColor: 'white',
      image: {
        pull: [
          'widget://image/dropdown_anim_00.png',
           'widget://image/dropdown_anim_01.png',
           'widget://image/dropdown_anim_02.png',
           'widget://image/dropdown_anim_03.png',
           'widget://image/dropdown_anim_04.png',
           'widget://image/dropdown_anim_05.png',
           'widget://image/dropdown_anim_06.png',
           'widget://image/dropdown_anim_07.png',
           'widget://image/dropdown_anim_08.png',
           'widget://image/dropdown_anim_09.png',
           'widget://image/dropdown_anim_10.png',
      ],
      load: [
        'widget://image/dropdown_loading_00.png',
        'widget://image/dropdown_loading_01.png',
        'widget://image/dropdown_loading_02.png'
    ]}
  }, function() {
          //下拉刷新被触发，自动进入加载状态，使用 api.refreshHeaderLoadDone() 手动结束加载中状态
          //下拉刷新被触发，使用 api.refreshHeaderLoadDone() 结束加载中状态
          // alert('开始加载刷新数据，摇一摇停止加载状态');

      setTimeout(function(){
       api.refreshHeaderLoadDone()
     },500)
      });

    };
    if (BrowserType() == 'pc') {
        initVue()
    }

    function initVue() {

        new Vue({
            el: '#app',

              data:{
                images:[
                  '../../image/home_index_1.png'
                ],
                value:"",
              },
            methods: {

            },


        })
    }
</script>

</html>
